<template>
  <div class="shoppint">

    <main>
      <div class="hamburger" v-for='(item,index) in zhengzaiqianggouArr' :key="index">
        <div class="leftimg">
          <div class="leftimg--img">
            <img :src="item.picture" alt="">
          </div>
        </div>

        <div class="right">
          <div class="top" style="margin-bottom:15px;color:gray;">{{item.name}}</div>
          <div class="mainn" style="margin-bottom:22px;">{{item.unit}}</div>
          <span style="color:red;">爆爆团价</span>
          <div class="jine">
            <div class="left">
              <div class="money">￥<span>{{item.min_price}}</span></div>
              <div class="dazhe">{{item.promotion_info}}</div>
            </div>

            <div class="right">
              <div class="mashangqiang" @click='faseh'>
                {{gogo?'马上抢':'已抢'}}
              </div>

              <div class="yishou">
                {{item.month_saled_content}}
              </div>
            </div>
          </div>
        </div>
      </div>

    </main>

  </div>
</template>

<script>


import { baobao_list } from "../axios/api";

export default {

  data() {
    return {
      gogo: true,
      zhengzaiqianggouArr: []
    }
  },
  methods: {
    faseh() {
      this.gogo = !this.gogo
    }
  },
  mounted() {
    baobao_list({ status: 1 }).then(
      response => {
        console.log(response.data);
        this.zhengzaiqianggouArr = response.data.list;
      }
    )

  },
}
</script>

<style lang='scss' scoped>
main {
  width: 100%;
  height: 100%;
  margin-top: 40px;

  .hamburger {
    width: 100%;
    height: 170px;
    // background-color: aqua;
    margin-top: 50px;
    display: flex;

    .leftimg {
      width: 30%;
      height: 100%;
      //   background-color: pink;
      display: flex;
      justify-content: center;
      align-items: center;

      .leftimg--img {
        width: 80%;
        height: 70%;
        border: 1px solid red;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .right {
      width: 70%;
      height: 100%;
      //   background-color: orange;

      .jine {
        width: 100%;
        height: 70px;
        // background-color: orchid;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          width: 50%;
          height: 100%;
          //   background-color: aqua;

          .money {
            margin-top: 10px;

            span {
              color: red;
              font-size: 20px;
            }
          }

          .dazhe {
            width: 50px;
            height: 30px;
            // background-color: red;
            border: 1px solid red;
            text-align: center;
            line-height: 30px;
            color: red;
          }
        }

        .right {
          width: 50%;
          height: 100%;
          //   background-color: orchid;

          .mashangqiang {
            width: 90px;
            height: 40px;
            background-color: red;
            float: right;
            border-radius: 25px;
            text-align: center;
            line-height: 40px;
            color: #fff;
          }

          .yishou {
            float: right;
            margin-right: 15px;
            margin-top: 5px;
            color: red;
          }
        }
      }
    }
  }
}
</style>